<template>
  <view class="featured-news">
    <view class="news-image">
      <image :src="imageSrc" mode=""></image>
      <view class="news-overlay">
        <text class="news-title">{{ title }}</text>
        <button class="read-btn" @click="onReadClick">开始阅读</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  imageSrc: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  }
});

const emits = defineEmits(['readClick']);

const onReadClick = () => {
  emits('readClick');
};
</script>

<style scoped lang='scss'>
.featured-news {
  margin: 40rpx;

  .news-image {
    position: relative;
    border-radius: 16rpx;
    height: 600rpx;

    image {
      width: 100%;
      height: 100%;
    }

    .news-overlay {
      .news-title {
        position: absolute;
        top: 50rpx;
        left: 50%;
        transform: translateX(-50%);
        color: #000;
        white-space: nowrap;
        font-size: 48rpx;
      }

      .read-btn {
        position: absolute;
        bottom: 20rpx;
        right: 18rpx;
        width: 160rpx;
        height: 60rpx;
        font-size: 28rpx;
        background-color: #FDCB6E;
        white-space: nowrap;
        line-height: 60rpx;
      }
    }
  }
}
</style>